<!-- 地图景点详情弹窗 -->
<template>
  <div v-if="modelValue" class="fixed inset-0 z-[9999] overflow-y-auto">
    <div class="flex items-center justify-center min-h-screen px-4 pt-4 pb-20 text-center sm:block sm:p-0">
      <!-- 背景遮罩 -->
      <div 
        class="fixed inset-0 transition-opacity bg-gray-500 bg-opacity-75" 
        @click="$emit('update:modelValue', false)"
      ></div>

      <!-- 弹窗内容 -->
      <div class="inline-block w-full max-w-2xl p-6 my-8 overflow-hidden text-left align-middle transition-all transform bg-white shadow-xl rounded-2xl relative">
        <!-- 头部 -->
        <div class="flex justify-between items-start mb-4">
          <h2 class="text-2xl font-bold text-gray-900">{{ spot.name }}</h2>
          <button 
            @click="$emit('update:modelValue', false)"
            class="text-gray-400 hover:text-gray-500"
          >
            <font-awesome-icon icon="times" class="text-xl" />
          </button>
        </div>

        <!-- 主图 -->
        <div class="h-60 bg-gray-100 rounded-xl overflow-hidden mb-4">
          <img 
            :src="spot.img" 
            :alt="spot.name"
            class="w-full h-full object-cover"
          />
        </div>

        <!-- 地图预览 -->
        <div class="rounded-xl overflow-hidden mb-4">
          <div ref="mapContainer" class="w-full h-48"></div>
        </div>

        <!-- 操作按钮 -->
        <div class="flex space-x-4">
          <button 
            class="flex-1 bg-blue-600 text-white py-2 rounded-lg hover:bg-blue-700 transition-colors"
            @click="handleNavigate"
          >
            <font-awesome-icon icon="directions" class="mr-2" />
            路线导航
          </button>
          <!-- <button 
            class="flex-1 bg-green-600 text-white py-2 rounded-lg hover:bg-green-700 transition-colors"
            @click="handleFavorite"
          >
            <font-awesome-icon icon="heart" class="mr-2" />
            收藏景点
          </button> -->
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted, watch } from 'vue'
import AMapLoader from '@amap/amap-jsapi-loader'

interface MapSpot {
  name: string
  img: string
  position: [number, number]
}

const props = defineProps<{
  modelValue: boolean
  spot: MapSpot
}>()

const emit = defineEmits<{
  (e: 'update:modelValue', value: boolean): void
  (e: 'navigate'): void
  (e: 'favorite'): void
}>()

// 地图相关
const mapContainer = ref<HTMLElement | null>(null)
let map: any = null

// 解决地图加载失败的问题
  AMapLoader.reset()

// 初始化地图
const initMap = async () => {
  if (!mapContainer.value || !props.spot.position) return

  try {
    const AMap = await AMapLoader.load({
      key: '512cb9e9902a4d511b7abfc6f55d5ac9',
      version: '2.0',
      plugins: ['AMap.Scale', 'AMap.ToolBar']
    })

    if (map) {
      map.destroy()
    }

    map = new AMap.Map(mapContainer.value, {
      zoom: 14,
      center: [props.spot.position[1], props.spot.position[0]]
    })

    // 添加标记
    new AMap.Marker({
      position: [props.spot.position[1], props.spot.position[0]],
      map: map
    })

  } catch (error) {
    console.error('地图加载失败:', error)
  }
}

// 监听弹窗显示状态
watch(() => props.modelValue, (newVal) => {
  if (newVal && props.spot.position) {
    setTimeout(() => {
      initMap()
    }, 100)
  }
})

// 操作按钮处理函数
const handleNavigate = () => {
  emit('navigate')
  emit('update:modelValue', false)
}

const handleFavorite = () => {
  emit('favorite')
  emit('update:modelValue', false)
}

// 组件卸载时清理地图实例
onMounted(() => {
  if (props.modelValue && props.spot.position) {
    initMap()
  }
})
</script>

<style scoped>
/* 确保弹窗显示在最上层 */
:deep(.amap-container) {
  z-index: 1 !important;
}
</style> 